<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" @click="adduservisible=true">新增用户</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column label="注册时间" align="center">
          <template slot-scope="scope">{{scope.row.time | timefilter}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button
                class="btn"
                type="danger"
                icon="el-icon-delete"
              v-if="scope.row.username!='admin'"
                @click="deleteuser(scope.row._id)"
              >删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 注册用户弹框   ===添加用户 -->
    <el-dialog title="添加用户" :visible.sync="adduservisible" width="40%">
      <el-form label-width="150px" :model="form" ref="form">
        <el-form-item label="用户名称" prop="username" required>
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password" required>
          <el-input v-model="form.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adduservisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getuser, register, deuser } from "../axios/api";
import { deletemodal } from "../components/util";
export default {
  data() {
    return {
      tableData: [],
      adduservisible: false,
      form: {
        username: "",
        password: "",
      },
    };
  },
  created() {
    this.getuserlist();
  },

  filters: {
    timefilter(val) {
      var date = new Date(val * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
  methods: {
    async show(row) {
      const response = await this.$http.delete("/auth/deuser", {
        data: {
          userid: row._id,
        },
      });

      if (response.status == 200) {
        this.$message.success("删除子码成功");
        this.getuserlist();
      }
    },
    //获取用户列表
    async getuserlist() {
      const res = await getuser({ page: 1 });
      if (res.status == 200) {
        this.tableData = res.data.date;
      }
    },
    //添加用户
    adduser() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await register(this.form);
          // console.log(res);
          if (res.status == 201) {
            this.$message.success("添加用户成功");
            this.adduservisible = false;
            this.getuserlist();
          } else {
            this.$message.error("添加用户失败");
          }
        } else {
          return this.$message.error("请输入合法的数据");
        }
      });
    },
    //删除用户
   async deleteuser(id){
      const res = await deletemodal()
      if(!res) return 
     const response = await deuser({data:{userid:id}})
     if(response.status==200){
       this.$message.success('删除用户成功')
       this.getuserlist()
     }
  },
  },
};
</script>
<style lang="less" scoped>
</style>